{% extends "base.html" %}
{% load staticfiles %}

{% block page_content %}
<section class="content-header" style="padding-top:0px" xmlns="http://www.w3.org/1999/html">
<div class="row">
    <div class="box box-info">
        <div class="box-header">
            <h2>Train and apply custom detectors using region annotations</h2>
        </div>
    </div>
</div>
</section>
<section class="content">
    <div class="row">
        <div class="col-lg-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4>Train custom YOLO detector</h4>
                </div>
                <div class="box-body">
                    <form role="form" action="/train_detector/"  method="post" >
                            <div class="row">
                            <div class="col-lg-6"><div class="form-group">
                                <label for="name">Detector name</label>
                                <input id="id_name" name="name" class="form-control" type="text" required="" placeholder="provide a name">
                            </div></div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="excluded_videos">Exclude video/dataset</label>
                                    <select class="js-example-basic-multiple" multiple="multiple" id="excluded_videos" name="excluded_videos" style="width:100%">
                                    {% for v in videos %}
                                        <option value="{{ v.pk }}">{{ v.name }}</option>
                                    {% endfor %}
                                    </select>
                                </div>
                            </div>
                            </div>
                            <div class="row">
                            <div class="col-lg-6"><div class="form-group">
                                <label for="object_names">Object names</label>
                                <input id="object_names" name="object_names" class="form-control" type="text" placeholder="comma separated list of regions to by object_names">
                            </div></div>
                            <div class="col-lg-6"><div class="form-group">
                                <label for="labels">Labels</label>
                                <input id="labels" name="labels" class="form-control" type="text" placeholder="comma separated list of regions to by applied labels">
                            </div></div>
                            </div>
                            <div class="form-group">
                                <label for="args">Additional JSON arguments for customizing options such as number of phase 1/2 epochs, etc.</label>
                                <textarea class="form-control" name="args" rows="2" placeholder="Additional arguments as JSON { phase_2_epochs:50 } etc."></textarea>
                            </div>
                            {% csrf_token %}
                            <div style="text-align: center">
                                <button type="submit" name="action" value="estimate" class="pull-left btn btn-info"><i class="fa fa-list"></i> Estimate training set</button>
                                <button type="submit" name="action" value="train" class="pull-right btn btn-primary"><i class="fa fa-gears"></i> Train detector</button>
                            </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h4>Train custom indexer</h4>
                </div>
                <div class="box-body">
                    <h4>Coming soon</h4>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
{% block page_js%}
<script>
    $(document).ready(function() {
        InitializeTables();
        var excluded_videos_ids = $("#excluded_videos");
        excluded_videos_ids.select2({theme: "bootstrap"});
        var selected_video_id = $("#video_pk");
        selected_video_id.select2({theme: "bootstrap"});
        var selected_detector_id = $("#detector_pk");
        selected_detector_id.select2({theme: "bootstrap"});
    })
</script>
{% endblock %}
